حالت همزمان React و Time Slicing: تخصیص بودجه زمانی رندرینگ

حالت همزمان React یک ویژگی متحول کننده است که سطح جدیدی از پاسخگویی و عملکرد را در برنامه های React فعال می کند. در قلب حالت همزمان، مفهوم Time Slicing قرار دارد که به React اجازه می دهد وظایف رندرینگ طولانی را به بخش های کوچکتر و قابل مدیریت تر تقسیم کند. این پست وبلاگ به جزئیات Time Slicing، تخصیص بودجه زمانی رندرینگ آن و چگونگی بهبود قابل توجه تجربه کاربری می پردازد.

درک نیاز به حالت همزمان

React سنتی به صورت همزمان عمل می کند. هنگامی که یک کامپوننت به روز می شود، React تا زمانی که کل درخت کامپوننت دوباره رندر شود، رشته اصلی را مسدود می کند. این می تواند منجر به تاخیرهای قابل توجهی شود، به خصوص در برنامه های پیچیده با تعداد زیادی کامپوننت یا منطق رندرینگ محاسباتی فشرده. این تاخیرها می توانند به صورت زیر ظاهر شوند:

• انیمیشن های ناهموار: انیمیشن ها به دلیل مسدود شدن مرورگر در حین رندرینگ، ناهموار و نامنظم به نظر می رسند.
• رابط کاربری غیرپاسخگو: برنامه در حین رندرینگ React به ورودی کاربر (کلیک ها، فشردن کلیدها) پاسخگو نمی شود.
• عملکرد ضعیف درک شده: کاربران برنامه را کند و ناکارآمد تجربه می کنند، حتی اگر دریافت داده های پایه سریع باشد.

حالت همزمان با فعال کردن React برای کار به صورت ناهمزمان، این مشکلات را حل می کند و به آن اجازه می دهد وظایف رندرینگ را با سایر عملیات، مانند مدیریت ورودی کاربر یا به روز رسانی رابط کاربری، در هم ببافد. Time Slicing یک مکانیزم کلیدی است که این امر را ممکن می سازد.

Time Slicing چیست؟

Time Slicing، که به عنوان چندوظیفه ای مشارکتی نیز شناخته می شود، تکنیکی است که در آن یک وظیفه طولانی به واحدهای کاری کوچکتر تقسیم می شود. معماری Fiber React، که اساس حالت همزمان را تشکیل می دهد، به React اجازه می دهد تا کار رندرینگ را در صورت نیاز متوقف، از سر بگیرد و حتی رها کند. به جای مسدود کردن رشته اصلی برای کل مدت به روز رسانی رندرینگ، React می تواند به طور دوره ای کنترل را به مرورگر بازگرداند و به آن اجازه می دهد رویدادهای دیگر را مدیریت کند و یک رابط کاربری پاسخگو را حفظ کند.

این را اینگونه تصور کنید: فرض کنید در حال رنگ آمیزی یک نقاشی دیواری بزرگ هستید. به جای تلاش برای رنگ آمیزی کل نقاشی دیواری در یک جلسه پیوسته، آن را به بخش های کوچکتر تقسیم می کنید و برای مدت کوتاهی روی هر بخش کار می کنید. این به شما امکان می دهد استراحت کنید، به سوالات عابران پاسخ دهید و اطمینان حاصل کنید که نقاشی دیواری بدون خسته کردن شما به طور روان پیش می رود. به طور مشابه، React وظایف رندرینگ را به برش های کوچکتر تقسیم می کند و آنها را با سایر فعالیت های مرورگر در هم می آمیزد.

تخصیص بودجه زمانی رندرینگ

یک جنبه حیاتی Time Slicing، تخصیص بودجه زمانی رندرینگ است. این به مقداری زمانی اشاره دارد که React مجاز است قبل از بازگرداندن کنترل به مرورگر، صرف رندرینگ کند. سپس مرورگر فرصتی برای مدیریت ورودی کاربر، به روز رسانی صفحه و انجام سایر وظایف دارد. پس از اینکه مرورگر نوبت خود را داشت، React می تواند رندرینگ را از جایی که متوقف شده بود، با استفاده از یک برش دیگر از بودجه زمانی تخصیص یافته خود، از سر بگیرد.

بودجه زمانی مشخص تخصیص یافته به React توسط مرورگر و منابع موجود تعیین می شود. React قصد دارد یک شهروند خوب باشد و از انحصار طلبی رشته اصلی اجتناب کند و اطمینان حاصل کند که مرورگر به تعاملات کاربر پاسخگو باقی می ماند.

چگونه React بودجه زمانی را مدیریت می کند

React از API `requestIdleCallback` (یا یک polyfill مشابه برای مرورگرهای قدیمی تر) برای برنامه ریزی کار رندرینگ استفاده می کند. `requestIdleCallback` به React اجازه می دهد تا وظایف پس زمینه را در زمانی که مرورگر بیکار است انجام دهد، به این معنی که مشغول مدیریت ورودی کاربر یا انجام سایر عملیات حیاتی نیست. تابع callback ارائه شده به `requestIdleCallback` یک شی `deadline` دریافت می کند که میزان زمان باقی مانده در دوره بیکاری فعلی را نشان می دهد. React از این مهلت زمانی برای تعیین میزان کار رندرینگ که می تواند قبل از بازگرداندن کنترل به مرورگر انجام دهد، استفاده می کند.

در اینجا یک تصویر ساده از نحوه مدیریت بودجه زمانی توسط React آورده شده است:

1. React کار رندرینگ را با استفاده از `requestIdleCallback` برنامه ریزی می کند.
2. هنگامی که `requestIdleCallback` اجرا می شود، React یک شی `deadline` دریافت می کند.
3. React شروع به رندر کردن کامپوننت ها می کند.
4. همانطور که React رندر می کند، شی `deadline` را بررسی می کند تا ببیند چه مقدار زمان باقی مانده است.
5. اگر React زمان تمام کند (یعنی مهلت زمانی فرا برسد)، رندرینگ را متوقف می کند و کنترل را به مرورگر باز می گرداند.
6. مرورگر ورودی کاربر، به روز رسانی صفحه و غیره را مدیریت می کند.
7. هنگامی که مرورگر دوباره بیکار شد، React رندرینگ را از جایی که متوقف شده بود، با استفاده از یک برش دیگر از بودجه زمانی تخصیص یافته خود، از سر می گیرد.
8. این فرآیند تا زمانی ادامه می یابد که همه کامپوننت ها رندر شوند.

مزایای Time Slicing

Time Slicing چندین مزیت قابل توجه برای برنامه های React ارائه می دهد:

• پاسخگویی بهبود یافته: با تقسیم وظایف رندرینگ به بخش های کوچکتر و در هم آمیختن آنها با سایر عملیات، Time Slicing از غیرپاسخگو شدن رابط کاربری در طول به روز رسانی های طولانی جلوگیری می کند. کاربران می توانند به طور روان با برنامه تعامل داشته باشند، حتی در حالی که React در پس زمینه رندر می کند.
• عملکرد درک شده بهبود یافته: حتی اگر زمان کل رندرینگ یکسان باقی بماند، Time Slicing می تواند برنامه را بسیار سریعتر احساس کند. با اجازه دادن به مرورگر برای به روز رسانی صفحه بیشتر، React می تواند بازخورد بصری را سریعتر به کاربر ارائه دهد و توهم یک برنامه پاسخگوتر را ایجاد کند.
• تجربه کاربری بهتر: ترکیب پاسخگویی بهبود یافته و عملکرد درک شده بهبود یافته منجر به تجربه کاربری به طور قابل توجهی بهتر می شود. کاربران کمتر احتمال دارد که به دلیل تاخیر یا عدم پاسخگویی با ناامیدی یا ناراحتی مواجه شوند.
• اولویت بندی به روز رسانی های مهم: حالت همزمان به React اجازه می دهد تا به روز رسانی های مهم، مانند موارد مربوط به ورودی کاربر را اولویت بندی کند. این تضمین می کند که رابط کاربری حتی در حالی که به روز رسانی های کمتر حیاتی در حال انجام است، به تعاملات کاربر پاسخگو باقی می ماند.

چگونه از Time Slicing در برنامه های React خود استفاده کنید

برای بهره مندی از Time Slicing، باید حالت همزمان را در برنامه React خود فعال کنید. این کار را می توان با استفاده از API های مناسب برای ایجاد یک ریشه انجام داد:

برای React 18 و بالاتر:

            import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');
const root = createRoot(container); // Create a root
root.render(<App />);

            

              
                Copy
              
            
          

برای React 17 و قدیمی تر (با استفاده از نقطه ورودی `react-dom/unstable_concurrentMode`):

            import ReactDOM from 'react-dom';

ReactDOM.unstable_createRoot(document.getElementById('root')).render(<App />);

            

              
                Copy
              
            
          

هنگامی که حالت همزمان فعال شد، React به طور خودکار Time Slicing را برای به روز رسانی های رندرینگ اعمال می کند. با این حال، اقدامات اضافی وجود دارد که می توانید برای بهینه سازی بیشتر برنامه خود برای حالت همزمان انجام دهید:

1. پذیرش Suspense

Suspense یک کامپوننت داخلی React است که به شما امکان می دهد عملیات ناهمزمان، مانند دریافت داده را به طور graceful مدیریت کنید. هنگامی که کامپوننتی که در Suspense پیچیده شده است تلاش می کند داده هایی را که هنوز در دسترس نیستند رندر کند، Suspense فرآیند رندرینگ را تعلیق می کند و یک رابط کاربری جایگزین (مثلاً یک نشانگر بارگیری) نمایش می دهد. پس از در دسترس قرار گرفتن داده ها، Suspense به طور خودکار رندرینگ کامپوننت را از سر می گیرد.

Suspense به طور یکپارچه با حالت همزمان کار می کند و به React اجازه می دهد در حالی که منتظر بارگیری داده ها است، رندرینگ سایر بخش های برنامه را اولویت بندی کند. این می تواند تجربه کاربری را با جلوگیری از مسدود شدن کل رابط کاربری در حین انتظار برای داده ها، به طور قابل توجهی بهبود بخشد.

مثال:

            import React, { Suspense } from 'react';

const ProfileDetails = React.lazy(() => import('./ProfileDetails')); // Lazy load the component

function MyComponent() {
 return (
 <Suspense fallback={<div>Loading profile...</div>}>
 <ProfileDetails />
 </Suspense>>
 );
}

export default MyComponent;

            

              
                Copy
              
            
          

در این مثال، کامپوننت `ProfileDetails` با استفاده از `React.lazy` به صورت lazy بارگذاری می شود. این بدان معناست که کامپوننت فقط زمانی بارگذاری می شود که واقعاً مورد نیاز باشد. کامپوننت `Suspense` کامپوننت `ProfileDetails` را پیچیده می کند و در حین بارگیری کامپوننت، پیام بارگیری را نمایش می دهد. این کار از مسدود شدن کل برنامه در حین انتظار برای بارگیری کامپوننت جلوگیری می کند.

2. استفاده از Transitions

Transitions مکانیزمی برای علامت گذاری به روز رسانی ها به عنوان غیر فوری است. هنگامی که یک به روز رسانی را در `useTransition` پیچیده می کنید، React به روز رسانی های فوری (مانند موارد مربوط به ورودی کاربر) را بر روی به روز رسانی Transition اولویت بندی می کند. این به شما امکان می دهد به روز رسانی های غیر حیاتی را تا زمانی که مرورگر فرصت پردازش آنها را بدون مسدود کردن رابط کاربری داشته باشد، به تعویق بیندازید.

Transitions به ویژه برای به روز رسانی هایی که ممکن است رندرینگ محاسباتی فشرده را فعال کنند، مانند فیلتر کردن یک لیست بزرگ یا به روز رسانی یک نمودار پیچیده، مفید هستند. با علامت گذاری این به روز رسانی ها به عنوان غیر فوری، می توانید اطمینان حاصل کنید که رابط کاربری حتی در حین پیشرفت به روز رسانی ها، به تعاملات کاربر پاسخگو باقی می ماند.

مثال:

            import React, { useState, useTransition } from 'react';

function MyComponent() {
 const [query, setQuery] = useState('');
 const [list, setList] = useState(initialList);
 const [isPending, startTransition] = useTransition();

 const handleChange = (e) => {
 const newQuery = e.target.value;
 setQuery(newQuery);

 startTransition(() => {
 // Filter the list based on the query
 setList(initialList.filter(item => item.toLowerCase().includes(newQuery.toLowerCase())));
 });
 };

 return (
 <div>
 <input type="text" value={query} onChange={handleChange} />
 {isPending ? <p>Filtering...</p> : null}
 <ul>
 {list.map(item => (<li key={item}>{item}</li>))}
 </ul>
 </div>
 );
}

export default MyComponent;

            

              
                Copy
              
            
          

در این مثال، تابع `handleChange` لیستی را بر اساس ورودی کاربر فیلتر می کند. تابع `startTransition` برای پیچیدن فراخوانی `setList` استفاده می شود و به روز رسانی را به عنوان غیر فوری علامت گذاری می کند. این به React اجازه می دهد تا سایر به روز رسانی ها، مانند به روز رسانی فیلد ورودی، را بر فیلتر کردن لیست اولویت بندی کند. متغیر وضعیت `isPending` نشان می دهد که آیا Transition در حال حاضر در حال انجام است، که به شما امکان می دهد یک نشانگر بارگیری را نمایش دهید.

3. بهینه سازی رندر کامپوننت

حتی با Time Slicing، هنوز هم مهم است که رندر کامپوننت خود را بهینه کنید تا میزان کاری که React باید انجام دهد را به حداقل برسانید. برخی از استراتژی ها برای بهینه سازی رندر کامپوننت ها عبارتند از:

• Memoization: از `React.memo` یا `useMemo` برای جلوگیری از رندر مجدد غیر ضروری کامپوننت ها استفاده کنید.
• Code Splitting: برنامه خود را به بخش های کوچکتر تقسیم کرده و با استفاده از `React.lazy` و `Suspense` آنها را در صورت تقاضا بارگیری کنید.
• Virtualization: از کتابخانه هایی مانند `react-window` یا `react-virtualized` برای رندر کارآمد لیست ها و جداول بزرگ استفاده کنید.
• ساختارهای داده کارآمد: از ساختارهای داده کارآمد (به عنوان مثال، Maps، Sets) برای بهبود عملکرد عملیات دستکاری داده استفاده کنید.

4. پروفایل برنامه خود را بسازید

از React Profiler برای شناسایی گلوگاه های عملکرد در برنامه خود استفاده کنید. Profiler به شما امکان می دهد زمان رندرینگ هر کامپوننت را ثبت کرده و مناطقی را که می توانید عملکرد را بهبود بخشید، شناسایی کنید.

ملاحظات و معایب احتمالی

در حالی که حالت همزمان و Time Slicing مزایای قابل توجهی را ارائه می دهند، برخی ملاحظات و معایب احتمالی نیز وجود دارد که باید به خاطر داشت:

• افزایش پیچیدگی: حالت همزمان می تواند پیچیدگی را به برنامه شما اضافه کند، به خصوص اگر با مفاهیم برنامه نویسی ناهمزمان آشنا نباشید.
• مسائل سازگاری: برخی کتابخانه ها و کامپوننت های قدیمی ممکن است به طور کامل با حالت همزمان سازگار نباشند. ممکن است لازم باشد این کتابخانه ها را به روز یا جایگزین کنید تا اطمینان حاصل کنید که برنامه شما به درستی کار می کند.
• چالش های اشکال زدایی: اشکال زدایی کد ناهمزمان می تواند چالش برانگیزتر از اشکال زدایی کد همزمان باشد. ممکن است لازم باشد از ابزارهای اشکال زدایی تخصصی برای درک جریان اجرا در برنامه خود استفاده کنید.
• پتانسیل لکنت: در موارد نادر، Time Slicing می تواند منجر به اثر لکنت جزئی شود اگر React به طور مداوم رندرینگ را متوقف و از سر بگیرد. این معمولاً با بهینه سازی رندر کامپوننت و استفاده مناسب از Transitions قابل کاهش است.

مثال های دنیای واقعی و موارد استفاده

Time Slicing به ویژه در برنامه هایی با ویژگی های زیر مفید است:

• رابط های کاربری پیچیده: برنامه های با درختان کامپوننت بزرگ یا منطق رندرینگ محاسباتی فشرده.
• به روز رسانی های مکرر: برنامه هایی که نیاز به به روز رسانی های مکرر رابط کاربری دارند، مانند داشبوردهای بلادرنگ یا تجسم های تعاملی.
• اتصالات شبکه کند: برنامه هایی که نیاز به مدیریت graceful اتصالات شبکه کند دارند.
• مجموعه داده های بزرگ: برنامه هایی که نیاز به نمایش و دستکاری مجموعه داده های بزرگ دارند.

در اینجا چند نمونه خاص از نحوه استفاده از Time Slicing در برنامه های دنیای واقعی آورده شده است:

• وب سایت های تجارت الکترونیک: با به تعویق انداختن به روز رسانی های کمتر حیاتی، پاسخگویی لیست های محصول و نتایج جستجو را بهبود بخشید.
• پلتفرم های رسانه های اجتماعی: اطمینان حاصل کنید که رابط کاربری در حین بارگیری پست ها و نظرات جدید به تعاملات کاربر پاسخگو باقی می ماند.
• برنامه های نقشه: نقشه ها و داده های جغرافیایی پیچیده را با تقسیم وظایف رندرینگ به بخش های کوچکتر، به طور روان رندر کنید.
• داشبوردهای مالی: به روز رسانی های بلادرنگ را به داده های مالی بدون مسدود کردن رابط کاربری ارائه دهید.
• ابزارهای ویرایش مشارکتی: به چندین کاربر امکان ویرایش اسناد را به طور همزمان بدون تجربه تاخیر یا عدم پاسخگویی بدهید.

نتیجه

ویژگی Time Slicing در حالت همزمان React یک ابزار قدرتمند برای بهبود پاسخگویی و عملکرد درک شده برنامه های React است. با تقسیم وظایف رندرینگ به بخش های کوچکتر و در هم آمیختن آنها با سایر عملیات، Time Slicing از غیرپاسخگو شدن رابط کاربری در طول به روز رسانی های طولانی جلوگیری می کند. با پذیرش Suspense، Transitions و سایر تکنیک های بهینه سازی، می توانید پتانسیل کامل حالت همزمان را آزاد کرده و تجربه کاربری به طور قابل توجهی بهتری ایجاد کنید.

در حالی که حالت همزمان می تواند پیچیدگی را به برنامه شما اضافه کند، مزایایی که در زمینه عملکرد و تجربه کاربری ارائه می دهد، ارزش تلاش را دارد. همانطور که React به تکامل خود ادامه می دهد، حالت همزمان احتمالاً بخش مهمی از اکوسیستم React خواهد شد. درک Time Slicing و تخصیص بودجه زمانی رندرینگ آن برای ساخت برنامه های React با عملکرد بالا و پاسخگو که تجربه کاربری لذت بخشی را برای مخاطبان جهانی، از شهرهای شلوغ مانند توکیو، ژاپن تا مناطق دورافتاده با پهنای باند محدود در کشورهایی مانند مغولستان ارائه می دهند، ضروری است. چه کاربران شما از دسکتاپ های پیشرفته استفاده کنند و چه از دستگاه های موبایل کم قدرت، حالت همزمان می تواند به شما در ارائه یک تجربه روان و پاسخگو کمک کند.